<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>拖拽实验</title>
<!--基本引用文件-->  
<link rel="Stylesheet" type="text/css" href="/hhcommon/opensource/ext/resources/css/ext-all.css" /> 
<script type="text/javascript" src="/hhcommon/opensource/ext/adapter/ext/ext-base.js"></script>    
<script type="text/javascript" src="/hhcommon/opensource/ext/ext-all-debug.js"></script>    
<script type="text/javascript" src="/hhcommon/opensource/ext/build/locale/ext-lang-zh_CN.js"></script>

<!--基本样式开始-->
<style type="text/css">
body{
   font-size:12px;margin: 10px;
}
.block {
   clear:left; 
   margin-top:50px; 
   border: solid 1px #000;
   height:160px; 
   padding:20px 0 0 20px; 
}
.item {            
   border: 1px #000 solid;                        
   margin-right:10px;                                               
   width: 50px;            
   height: 20px;             
   text-align:center;            
   padding-top:10px; 
   float:left;            
   cursor:pointer;
   font-size:12px;
   color:Black
}                
.BorderOver{
   border:dashed 2px #00f;
}
.red{
   background:red;
}
.black{
   background:black;
}
.green{
   background:green;
}
.selecteditem{
   border:1px dashed blue;
}
</style> 
<!--基本样式结束-->
</head>
<body>
<script type="text/javascript">
Ext.namespace('Designer');
Ext.namespace('Designer.UI');
Ext.maxuiid = 1000;     //界面元素开始序号
Ext.selectedobj = {};    //设置当前选中控件,默认为空对象,
         //某一时刻有且只有一个控件处于选中状态

Ext.onReady(function() {
Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

var proxy_label    = new Ext.dd.DragSource('proxy_label', {group:'dd'});
var proxy_textfield   = new Ext.dd.DragSource('proxy_textfield', {group:'dd'});
var proxy_combo    = new Ext.dd.DragSource('proxy_combo', {group:'dd'});
var proxy_textarea   = new Ext.dd.DragSource('proxy_textarea', {group:'dd'});


//拖动完成的事件 
proxy_label.afterDragDrop = function(target, e, id) { 
   var destEl = Ext.get(id);
   var srcEl   = Ext.get(this.getEl()); 
   var uitype = srcEl.dom.id.split('_')[1];
   /*获取X,Y坐标*/
   var beginX = destEl.getX();     //目标区块的X轴初始坐标
   var beginY = destEl.getY();     //目标区块的Y轴初始坐标  
   var eXY = e.getXY();  
   var dragtargetX = eXY[0];
   var dragtargetY = eXY[1];
   var X = dragtargetX - beginX;
   var Y = dragtargetY - beginY;   
   //console.log("X:"+X+" "+"Y:"+Y);

   var uiobj      = Designer.createui(uitype,X,Y,{});//创建UI元素
  
  
   Designer.formPanel.add(uiobj);
   Designer.formPanel.doLayout();
  
  
}
proxy_textfield.afterDragDrop = proxy_label.afterDragDrop;
proxy_combo.afterDragDrop   = proxy_label.afterDragDrop; 
proxy_textarea.afterDragDrop = proxy_label.afterDragDrop;

var target = new Ext.dd.DDTarget('target', 'dd');     
//建立拖动目标区(这里的dd与上面拖动源的group:dd相同 

//只有相同group的DDProxy/DragSource才会接受)
var target2 = new Ext.dd.DDTarget('target2', 'dd');   
Designer.uxForm();
//右侧属性表格
//var right_prop = Designer.propsGrid();
//right_prop.show();

});
</script>

<script language="javascript">

Designer.createui = function(uitype,X,Y,object){ 
	debugger;
var obj   = {x:X,y:Y,id:(uitype+Ext.maxuiid)}; 
Ext.maxuiid += 1;
if(uitype=="label"){
   obj.text   = "静态文本:";
   obj.style = "font-size:14px;";  
   var uiobj = new Ext.form.uxLabel(obj);
}else if(uitype=="textfield"){
   obj.readOnly=true;
   var uiobj = new Ext.form.TextField(obj);
}else if(uitype=="combo"){
   var store = new Ext.data.SimpleStore({//定义组合框中显示的数据源
    fields: [ {name: 'displayField',mapping:'label'},
           {name: 'valueField',mapping:'value'}],
    data :[]
   });
   obj.store = store; obj.readOnly=true; 
   var uiobj = new Ext.form.ComboBox(obj);
}else if(uitype=="textarea"){
   obj.readOnly=true;
   var uiobj = new Ext.form.TextArea(obj);
}else {
   alert("未定义的界面元素类型");
}
if(uitype=='label'){
   uiobj.on("click",function(){
    //改变文本背景颜色
    var el = uiobj.getEl(); 
   
    //如果已经选中某个控件，则将其选中状态去除
    if(Ext.selectedobj.id!=undefined){   
     var selectd_el = document.getElementById(Ext.selectedobj.id);
     var classname = selectd_el.className;
     if(classname.indexOf("selecteditem")!= -1){
      selectd_el.className = selectd_el.className.replace("selecteditem", '')
     }
    }
    //设置新的选中控件，并改变其样式
    Ext.selectedobj = obj ;
    el.addClass("selecteditem"); 
   
    //将该对象的相关属性保存到以uiid为key的对象中
    var uiid = obj.id;
    Designer.UI.uiid = obj;   
   
   
    var formid = uiobj.getEl().findParent('form').id;
    //////////////////////////////////////////////////
    var pos = gettargetXY(el,formid,this.getEl());
   
    /*打开属性列表*/
    if(obj.clicked!=true){     
      right_prop = Designer.propsGrid();
      right_prop.show(); 
    }
    //当前状态有且只有一个控件处于选中状态   
    if(uitype=="label"){
     var prop_sourceobj = {
        '名称'   : '静态文本',
        "宽度"   :   20,
        "横坐标" : pos.x,
        "纵坐标" : pos.y
     }; 
    }else {
     var prop_sourceobj = {};
    }
   
    right_prop.setSource(prop_sourceobj);
    //增加状态控制，防止一个控件创建多次属性表格
    obj.clicked = true;    

    //////////////////////////////////////////////////
    //创建一个拖拽对象
    var target = new Ext.dd.DDProxy(uiobj.id, 'dd');
    //拖拽函数处理
    target.onDragDrop = function(e,id){    
     var newpos = gettargetXY(e,id,this.getEl());
     /*打开属性列表*/
     if(obj.clicked!=true){
      right_prop = Designer.propsGrid();
      right_prop.show(); 
     }
     right_prop.setSource({
       '名称': '静态文本',
       "宽度": 20,
       "横坐标":newpos.x,
       "纵坐标":newpos.y
     });
     //增加状态控制，防止创建多个属性表格
     obj.clicked = true;
     //增加是否已经拖拽过，如果已经拖拽过则再拖拽的时候，默认先选中并显示属性表格
     obj.dragged = true;
    }
    
   });
}else if(uitype=='textfield'||uitype=='textarea'){
   uiobj.on("focus",function(){    
    var target = new Ext.dd.DDProxy(uiobj.id, 'dd');
    target.onDragDrop = function(e,id){
     var newpos = gettargetXY(e,id,this.getEl());
    
    }   
   });
}else{
   alert("其它");
}

return uiobj;
}
</script>

<!--基本控件类型-->
<div style="margin-left:300px;margin-top:60px;"> 
<div id="proxy_label"   class="item" > 静态文本 </div>
<div id="proxy_textfield" class="item" > 文本框   </div> 
<div id="proxy_combo"   class="item"> 下拉框   </div>
<div id="proxy_textarea" class="item"> 多行文本 </div>
</div>
<br/>

<div>
<div id="uxform" style="margin-left:200px;margin-top:40px;float:left;width:auto;"></div>
<div id="prop-grid" style="margin-top:40px;float:left;width:auto;"></div>
</div>
</body>
</html>

<script>
/*区域中间画布表单*/
Designer.uxForm = function (){
var formPanel = new Ext.form.FormPanel({   
id:'formpanelid',
    header:false,
//frame:true,
border:true,
layout:"absolute",
width :600,
height :400, 
renderTo:"uxform"
});
Designer.formPanel = formPanel;

var formPanelDropTargetEl = formPanel.body.dom;

var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
               id:'targetid',
               group     : 'dd',
               notifyEnter : function(ddSource, e, data) { 
               },
               notifyDrop : function(ddSource, e, data){
               }
           });
Designer.target = formPanelDropTarget;
}
/*获取相对父容器的坐标值的方法*/
function gettargetXY(e,id,el){
var destEl = Ext.get(id);
var srcEl   = el;
/*获取X,Y坐标*/
var beginX = destEl.getX();     //目标区块的X轴初始坐标
var beginY = destEl.getY();     //目标区块的Y轴初始坐标  
var eXY = e.getXY();  
var dragtargetX = eXY[0];
var dragtargetY = eXY[1];
var X = dragtargetX - beginX;
var Y = dragtargetY - beginY;
return {x:X,y:Y};
}
/*属性表格的定义*/
Designer.propsGrid = function(){
  
if(typeof Ext.grid_propgrid !='undefined' ){  
   return Ext.grid_propgrid;
} 
Ext.grid_propgrid = new Ext.grid.PropertyGrid({
                id:"prop_grid_right",
                renderTo: 'prop-grid',
                width: 200,
                hidden:true,
                autoHeight: true,        
                source: {
                 '(name)': 'Properties Grid',
                 grouping: false,
                 autoFitColumns: true,
                 productionQuality: false,
                 created: new Date(Date.parse('10/15/2006')),
                 tested: false,
                 version: 0.01,
                 borderWidth: 1
                },
                viewConfig : {
                 forceFit: true,
                 scrollOffset: 2 // the grid will never have scrollbars
                }
               });

return Ext.grid_propgrid;
}

///////////////////////////////////////////////////
</script>
<script>
/*自定义带事件Label*/
Ext.form.uxLabel = Ext.extend(Ext.form.Label, {
});
/* Ext.form.uxLabel.prototype.afterRender = Ext.form.uxLabel.prototype.afterRender.createSequence(
    function() { this.relayEvents(this.el, ['click']); }
); */
</script>